<script lang="ts" setup>
import { useVModel } from '@vueuse/core'
import { computed, ref, type Component } from 'vue'

/**
 * 统一的Modal弹框，header中带有公司logo，按钮加大处理
 * Modal内容高度为可视窗口高度 - header高度(64px) - Modal_Header高度(70px) - Modal_Footer高度(56px) - 底部空隙（50px）
 *
 * props`comp`为Modal弹框内部显示的表单内容。
 *
 */

const props = withDefaults(
  defineProps<{
    visible: boolean
    comp?: Component
    // 是否居中显示。大部分情况，由于表单内容较多，通常会占据2/3以上的桌面大小，此时只需要设置表单宽度即可，高度会根据窗口大小自适应。
    // 当内容较少时，如需居中显示，则设置该值为true即可。
    alignCenter?: boolean
  }>(),
  {
    compRef: undefined,
    alignCenter: false
  }
)

const emits = defineEmits<{
  (e: 'update:visible', value: boolean): void
}>()

const show_modal = useVModel(props, 'visible', emits)

const component_ref = ref()

const body_height = computed(() => {
  if (component_ref.value?.footer === false) {
    // modal header： 56px
    // 上下间距 48px， 但实际情况是，弹窗的关闭按钮太大，为了不造成页面滚动，上间距适当调到了30px， 54px
    // modal footer: 56px
    return 'calc(100vh - 56px - 30px - 24px)'
  }
  return 'calc(100vh - 56px - 30px - 24px - 56px )'
})

defineExpose({
  component_ref
})
</script>

<template>
  <a-modal
    v-model:visible="show_modal"
    modal-class="base-modal"
    :align-center="alignCenter"
    :top="30"
    :title="component_ref?.title"
    :width="component_ref?.width ?? 'calc(100% - 100px)'"
    :closable="false"
    :unmount-on-close="true"
    :footer="component_ref?.footer ? true : false"
    :mask-closable="false"
    v-bind="$attrs"
  >
    <template #title>
      <div class="base-modal-header">
        <img class="logo" src="./modal_logo.png" :width="52" :height="52" alt="" />
        <span class="title">
          {{ component_ref?.title || $attrs.title }}
        </span>

        <div class="extra">
          <div class="extra-row">
            <div v-if="component_ref?.extra?.apply_no" class="extra-row-item">
              <span class="label">编号：</span>
              <span class="value">{{ component_ref?.extra?.apply_no }}</span>
            </div>
          </div>
          <div class="extra-row">
            <div v-if="component_ref?.extra?.apply_user" class="extra-row-item">
              <span class="label">申请人：</span>
              <span class="value">{{ component_ref?.extra?.apply_user }}</span>
            </div>
            <div v-if="component_ref?.extra?.apply_time" class="extra-row-item ml-16px">
              <span class="label">申请时间：</span>
              <span class="value">{{ component_ref?.extra?.apply_time }}</span>
            </div>
          </div>
        </div>
        <div class="btn-group">
          <a-space>
            <img
              class="btn"
              src="./modal_close-btn.png"
              :width="52"
              :height="52"
              alt=""
              @click="show_modal = false"
            />
          </a-space>
        </div>
      </div>
    </template>

    <a-scrollbar :style="`max-height: ${body_height}; overflow: auto;`">
      <Component
        v-if="props.comp"
        :is="props.comp"
        v-bind="$attrs"
        ref="component_ref"
        @close="show_modal = false"
      />
    </a-scrollbar>

    <template #footer>
      <component :is="component_ref?.footer" />
    </template>
  </a-modal>
</template>

<style scoped lang="less">
.base-modal {
  .base-modal-header {
    position: relative;

    height: 70px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 400;
    font-size: 24px;
    letter-spacing: -0.3px;
    color: #333333;

    .logo {
      position: absolute;
      left: 0;
    }

    .btn-group {
      position: absolute;
      top: -26px;
      right: -46px;
      min-width: 52px;
      height: 52px;
      display: flex;
      flex-direction: row-reverse;

      .btn {
        cursor: pointer;

        &:hover {
          background-color: rgba(0, 0, 0, 0.8);
          border-radius: 50%;
        }
      }
    }

    .extra {
      position: absolute;
      right: 0;

      display: flex;
      flex-direction: column;

      &-row {
        display: flex;
        align-items: center;
        gap: 40px;

        &-item {
          display: flex;
          align-items: center;

          .label {
            font-size: 14px;
            color: #888888;
          }

          .value {
            color: #252b3a;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
